<template>
  <div class="category-container">
    <compHeader></compHeader>
    <van-tree-select
      height="100vh"
      :items="categoryList"
      :main-active-index.sync="active"
      @click-nav="menuFn"
      @click-item="conentFn"
    >
      <template #content>
        <div v-if="currentCategory">
          <div class="banner" @click="conentFn(currentCategory.id)">
            <img :src="currentCategory.banner_url" alt="" />
            <p class="front_name">{{ currentCategory.front_text }}</p>
          </div>
          <div class="title">
            <h4>{{ title }}分类</h4>
          </div>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item in subCategoryList"
              :key="item.id"
              :icon="item.wap_banner_url"
              :text="item.text"
              @click="conentFn(item.id)"
            />
          </van-grid>
        </div>
      </template>
    </van-tree-select>
    <MyLoading v-if="$store.state.isShow"></MyLoading>
    <compTabbar></compTabbar>
  </div>
</template>

<script>
import compHeader from "@/components/compHeader.vue";
import compTabbar from "@/components/compTabbar.vue";
import MyLoading from "@/components/MyLoading.vue";
import {
  getCategoryData,
  getCateData,
  getCurrentCategoryData,
} from "@/request/api";
export default {
  components: {
    compTabbar,
    compHeader,
    MyLoading,
  },
  data() {
    return {
      active: 0,

      categoryList: [],
      title: "",
      subCategoryList: [],
      currentCategory: null,
      brotherCategory: [],
    };
  },
  methods: {
    menuFn(index) {
      this.active = index;
      this.title = this.categoryList[index].text;
      getCurrentCategoryData({
        id: this.categoryList[index].id,
      }).then((res) => {
        if (res.errno == 0) {
          let { currentCategory } = res.data;
          let { subCategoryList } = currentCategory;
          this.currentCategory = JSON.parse(
            JSON.stringify(currentCategory).replace(/name/g, "text")
          );
          this.subCategoryList = JSON.parse(
            JSON.stringify(subCategoryList).replace(/name/g, "text")
          );
        }
      });
    },
    conentFn(data) {
      this.$router.push("/home/popup?cid=" + data);
    },
  },
  mounted() {
    this.$nextTick(() => {});
  },
  activated() {
    //组件激活时
    getCategoryData().then((res) => {
      if (res.errno == 0) {
        let { categoryList, currentCategory } = res.data;

        this.categoryList = JSON.parse(
          JSON.stringify(categoryList).replace(/name/g, "text")
        );
        // console.log(this.categoryList);
        this.currentCategory = JSON.parse(
          JSON.stringify(currentCategory).replace(/name/g, "text")
        );
        this.title = this.categoryList[0].text;
        this.subCategoryList = JSON.parse(
          JSON.stringify(categoryList[0].subCategoryList).replace(
            /name/g,
            "text"
          )
        );
      }
    });
    if (this.$route.query.cid) {
      getCateData({
        id: this.$route.query.cid,
      }).then((res) => {
        if (res.errno == 0) {
          let { currentCategory, brotherCategory } = res.data;
          this.categoryList = JSON.parse(
            JSON.stringify(brotherCategory).replace(/name/g, "text")
          );
          this.currentCategory = JSON.parse(
            JSON.stringify(currentCategory).replace(/name/g, "text")
          );
          this.categoryList.map((v, i) => {
            if (v.id == this.$route.query.cid) {
              this.menuFn(i);
            }
          });
        }
      });
    }
  },
  created() {},
};
</script>

<style lang="less" scoped>
.category-container {
  padding-top: 55px;
  overflow: hidden;
  height: calc(100vh - 65px);
}
.banner {
  height: 110px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    filter: brightness(0.8);
  }
  .front_name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #fff;
  }
}
.title {
  width: 50vw;
  text-align: center;
  margin: 20px auto;
  position: relative;
  border-bottom: 1px solid #666;
  h4 {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 4px;
  }
}
</style>